<template>
  <el-form
    ref="form"
    size="mini"
    :rules="rules"
    :model="formData"
    label-width="130px"
  >
    <el-row v-if="operate === 2">
      <el-col :span="24">
        <el-form-item label="权限标识：">
          <label>{{ formData.id }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="权限名称：" prop="name">
          <el-input
            v-if="operate === 0 || operate === 1"
            placeholder="请输入权限名称"
            v-model="formData.name"
          />
          <label v-else-if="operate === 2">{{ formData.name }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="权限名词：" prop="permission">
          <el-input
            v-if="operate === 0 || operate === 1"
            placeholder="请输入权限名词"
            v-model="formData.permission"
          />
          <label v-else-if="operate === 2">{{ formData.permission }}</label>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 0">
      <el-col :span="24">
        <el-form-item label="上级权限：" prop="parentId">
          <el-select
            v-if="operate === 0 || operate === 1"
            v-model="formData.parentId"
            style="width: 100%"
          >
            <el-option
              v-for="item in permissionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="operate === 0 || operate === 1">
      <el-col :span="24" align="center">
        <el-button type="primary" size="mini" @click="add">保存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { createUser, updateUser } from "../../axios/api";

export default {
  props: ["formData", "permissionList", "operate"],
  data() {
    return {
      rules: {
        username: [
          { required: true, message: "请输入用户账号", trigger: "blur" }
        ],
        nickname: [
          { required: true, message: "请输入用户昵称", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    add() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.operate === 0) {
            createUser(this.formData, () => {
              this.$emit("hiddenDetailDialog", false);
            });
          } else if (this.operate === 1) {
            updateUser(this.formData, () => {
              this.$emit("hiddenDetailDialog", false);
            });
          }
        }
      });
    },
    clearValidate() {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    }
  }
};
</script>
